<template>
    <div class="iframe">
        <div class="i-title">
            <h3>变量修改</h3>
        </div>
        <div class="i-tip">
            <el-input type="text" v-model="name" />
            <div class="i-tip">{{ name }}</div>
        </div>
        <div class="i-tip">
            <el-input type="text" v-model="stus[0]" />
        </div>
        <div class="i-tip flex">
            <el-tag class="tag" :key="index" v-for="(item, index) in stus" closable @close="cls(index)">
                {{ item }}
            </el-tag>
        </div>
        <div class="i-tip">
            <el-button @click="change()">修改</el-button>
        </div>
    </div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
    setup() {


        // 定义变量
        let name = ref("张三");
        let _stus = reactive(["水浒传", "三国演义", "西游记", "红楼梦"]);


        // 定义方法
        function change() {
            if (_stus.length > 2) {
                name.value = name.value + "你好";
                _stus[2] = "我是改变之后的值";
            }

        }

        function cls(index) {
            _stus.splice(index, 1)
        }

        // 使用页面重新渲染一次
        return {
            name,
            stus: _stus,
            change, cls
        }
    }
}
</script>
<style scoped>
.flex {
    display: flex;
    align-items: center;
}

.tag {
    margin-right: 10px;
}
</style>

